@font-face {
  font-family: 'iconfont';  /* project id 1833280 */
  src: url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.eot');
  src: url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.woff') format('woff'),
  url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1833280_7fhksyrdafj.svg#iconfont') format('svg');
}
.mailBody{position: relative;}
*{box-sizing: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.headerTop1 ul li{display: inline-block;color: #333;}
.headerTop1{background: #fff;padding: 10px 15px;color: #fff;position: fixed;width: 100%;box-sizing: border-box;box-shadow: 0 0 5px #cacaca;z-index: 9;}
.headerTop1 ul li i{font-size: 24px;color: #999;}
.headerTop1 ul li.screenIcon img{width: 24px; vertical-align: -3px;} 
.fl{float: left;}
.fr{float: right;}
.clearfix{*zoom:1;}
.clearfix:before{content: ''; display: block;clear: both;}
.clearfix:after{ content: ''; display: block;clear: both;}
.headerTop1 ul li.menuIcon a{float: left;margin-right: 3px;}
.headerTop1 .fr{margin-top: 5px;}
.headerTop1 .fr i{margin-left: 10px;}
body{background-color: #eee;margin:0;overflow-y:scroll;}
.mail_list{overflow-x:hidden;width:100%;padding-bottom: 60px;}
.mail_list .content{width: 100%;position: relative;}
.mail_list dl{display: flex;}
.mail_list dl dt{display: none;}
.mail_list dl dd{display: inline-block;width: 100%;}
.mail_list .content .listL{float: left;width: calc(100% - 5rem);overflow: hidden;}
.mail_list .content .listR{float: right;width: 5rem;text-align: right;position: absolute;right: 0px;}
.mail_list .item-container{width: 100%;padding:0.5rem 1rem;background-color: #fff;}
.mail_list .title{font-size: 15px;color: #000;margin: 0.3rem 0;display: -webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 2;overflow: hidden;max-height: 42px;    word-break: break-all;}
.mail_list .desc{font-size: 0.9rem;color: #999}
.mail_list .desc span{float: right}
.mail_list .action-delete{background: #d24b4b;}
.mail_list .action-edit{background:#00BCD4}
.mail_list .swipe-container{margin-bottom:0.5rem;width: 120%;display: flex;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}
.mail_list .swipe-container .action{width: 20%;text-align:center;color:#fff;padding:0.5rem 0;vertical-align: middle;display: flex;align-items: center;justify-content: center;}
.mail_list .swipeleft{transform: translateX(-16.5%);-webkit-transform: translateX(-16.5%);}
input, button, textarea {outline: none;-webkit-appearance: none;border-radius: 0;}
input[type="checkbox"]:checked,input[type="radio"]:checked{border-color: #009688;position: relative;}
input[type="checkbox"]:checked:after,input[type="radio"]:checked:after{content: "\e605";color: #009688;top: 1px;position: absolute;font-weight: bold;left: 1px;font-size: 12px;font-family: layui-icon;}
input[type="checkbox"],input[type="radio"]{width: 16px;height: 16px;border: 1px #999 solid;border-radius: 100%;vertical-align: -2px;margin-right: 10px;margin-top: 2px;}
/* .mail_list .swipe-container input[type="checkbox"]{display: none;} */
.mail_list .content .listL .listName{font-size: 18px;color: #333;}
.mail_list .content .listL .noRade{display: inline-block;width: 12px;height: 12px;background: #009688;border-radius: 100%;}
.mail_list .content .listR p{margin-bottom: 5px;}
.mail_list .content .listR p.state{font-size: 13px;}
.mail_list .content .listR p.state1{color: #bb9a4e;}
.mail_list .content .listR p.state2{color: #00BCD4;}
.mail_list .content .listR p.state3{color: #00ca19;}
.mail_list .content .listR p.state4{color: #f00;}
.mail_list .content .listR i.click{color: #f60;font-weight: bold;}
.mail_list .mailDesc p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;color: #666;}
.mailBody .footShow{position: fixed;bottom: 0;padding-left:1rem;background: #fff;width: 100%;border-top: 1px #dedede solid;box-sizing: border-box;height: 42px;line-height: 40px;display: none;z-index: 999;box-shadow: 0 0 5px #eee;}
.mailBody .footShow a{display: inline-block;/* padding: 0.5rem 1rem; */float: right;padding: 0 1rem;}
.mailBody .footShow a.cancelBtn{background: #999;color: #fff;}
.mailBody .footShow a.starBtn{background: #138cdf;color: #fff;}
.mailBody .footShow a.delBtn{background: #f60;color: #fff;}
.mailBody.show .footShow{display: block;}
.mailBody.show .mail_list .item-container dt{display: block;}
.mailBody .footShow .qxBtn{display: inline-block;margin-right: 10px;}
.mailBody .footShow .qxBtn input[type="checkbox"]{margin-right: 5px !important;margin-top: 12px;}
.mailBody .foot ul li{float: left;width: 50%;text-align: center;padding: 0.2rem 0 0.1rem;}
i.iconfont{font-family: iconfont;font-style: normal;font-size: 16px;}
.foot {position: fixed;width: 100%;bottom: 0;padding: 0rem;box-sizing: border-box;background: #fff;border-top: 1px #dedede solid;height: 42px;box-shadow: 0 0 5px #eee;}
.mailBody .foot ul li.active i{color: #009688;}
.mailBody .foot ul li i{display: inline-block;height: 16px;}
.fixTop {position: fixed;top:56px;box-sizing: border-box;padding: 0.8rem 1rem;background: #fff;width: 100%;
border-bottom: 1px #dedede solid;box-shadow: 0 0 5px #eee;display: none;}
.fixTop ul li{float: left;width: 33.33%;text-align: center;}
.mailBody .searchTop input[type="text"]{width: 83%;border-radius: 3px;border: 1px #dedede solid;
padding: 0 5px;height: 30px;vertical-align: 3px;}
.mailBody .searchTop .cancel{float: right;margin-top: 2px;display: inline-block;height: 30px;line-height: 30px;/* padding: 0 5px; */width: 40px;text-align: right;}
input[type="radio"]{display: block;float: right;}
.mailBody .menuL{width: 70%;display: inline-block;position: fixed;background: #fff;border-right: 1px #dedede solid;top: 0;z-index: 1001;height: 100%;left: -100%;}
.mailBody .menuL li{width: 100%;padding: 0rem 1rem;border-bottom: 1px #dedede solid;box-sizing: border-box;height: 48px;line-height: 48px;}
.mailBody .menuL li a{display: inline-block;width: 100%;}
.mailBody .menuL li.active{background: #daf5f2;}
.mailBody .menuL li input[type="radio"]{margin-top: 14px;width: 20px;height: 20px;}
.mailBody .menuL li input[type="radio"]:after{top: 3px;left: 3px;}
.mailBody .menuL li i{margin-right: 10px;}
.mailBody .menuL.open{left: 0;}
.mask{position: fixed;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;background: #000;
opacity: 0.4;filter: alpha(opacity=40);z-index: 1000;display: none;}
.headerTop2{height: 50px;line-height: 50px;padding: 0 1rem;box-sizing: border-box;background: #fff;
box-shadow: 0 0 5px #eee;position: fixed;width: 100%;    z-index: 10;}
.headerTop2 i{font-size: 24px;display: inline-block;width: 30px;height: 50px;line-height: 50px;}
.headerTop2  a{display: inline-block;}
.headerTop2 select{border: none;background: none;vertical-align: 5px;}
.headerTop2 i{color: #999;}
.writeBox li{padding: 0 1rem;box-sizing: border-box;height: 50px;line-height: 47px;/* margin-top: 10px; */background: #fff;border-top: 1px #dedede solid;} 
.writeBox li span{width: 80px;display: inline-block;margin-top: 3px;}
.writeBox li .fr{width: calc(100% - 80px);}
.writeInput{border:none;height: 34px;line-height: 34px;}
.writeInput2{width: calc(100% - 60px);}
.writeBox li .fr input[type="file"]{position: absolute;right: 0;width: 50px;top: 1px;opacity: 0;}
.writeBox li .fr a{/* display: inline-block; *//* width: 40px; */text-align: right;padding: 0.5rem 1rem;position: relative;}
.writeBox li .fr a.ccBtn{border: 1px #999 solid;border-radius: 30px;padding: 3px 8px;height: auto;/* background: #ddd; */vertical-align: 3px;}
.writeBox li .fr .fileBox a{display: inline-block;padding: 0 0.2rem;}
.writeBox li .fr a i {font-size: 20px;color: #999;}
.writeBox .ccList{display: none;}
.headerTop2 span{position: absolute;left: 50%;transform: translateX(-50%);font-size: 18px;top: 1px;}
.mailBox{padding-top: 60px;padding-top: 50px;padding-bottom: 40px;}
.checkBox .searchBox{position: relative;}
.checkBox .searchBox i{position: absolute;left: 1rem;font-size: 20px;color: #999;top: 7px;}
.checkBox .searchBox input{height: 38px;border: 1px #dedede solid;padding-left: 40px;width: 100%;
box-sizing: border-box;border-left:none;border-right: none;}
.checkBox .listBox input[type="checkbox"]{display: block;float: left;}
.checkBox .listBox{padding: 1rem 0;background: #fff;}
.checkBox .listBox h3{padding: 0 1rem;font-weight: bold;margin-bottom: 10px;}
.checkBox .listBox li{background: #fff;padding: 0.5rem 1rem;border-bottom: 1px #dedede solid;}
.checkBox .listBox li i{font-size: 20px;color: #999;margin-right: 10px;}
.addConBox{background: #fff;padding: 60px 1rem 1rem;box-sizing: border-box;}
.addConBox ul li span{width: 80px;display: inline-block;margin-bottom: 10px;}
.addConBox ul li{margin-bottom: 10px;}
.addConBox ul li input{height: 36px;border: 1px #dedede solid;width: 100%;padding-left: 5px;}
.addConBox ul li select{border: 1px #dedede solid;width: 100%;height: 36px;background: none;}
.datialBox {background: #fff;}
.datialBox .headBox{padding-top: 10px;}
.datialBox .headBox p {text-align: center;font-size: 18px;}
.datialBox .headBox p i{font-size: 50px;color: #bbb;}
.datialBox .midBox li{float: left;width: 50%;text-align: center;padding: 1rem 0;}
.datialBox .midBox li i{font-size: 24px;color: #999;}
.datialBox .midBox li a{display: inline-block;position: relative;}
.datialBox .midBox li a span{position: absolute;background: #f60;color: #fff;height: 16px;padding: 0 5px;border-radius: 30px;left: 63%;}
.datialBox .btmBox{padding: 0 1rem;box-sizing: border-box;}
.datialBox .btmBox li span{width: 80px;display: inline-block;}
.datialBox .btmBox li{padding: 0.5rem 0;}
.datialBox .btmBox select{width: 100%;height: 36px;}
.datialBox  .levelBox *{box-sizing: border-box;}
.datialBox  .levelBox{border: 1px #dedede solid;padding: 10px 15px;margin-top: 20px;}
.datialBox  .levelBox h3{font-size: 16px;font-weight: bold;margin-bottom: 10px;}
.datialBox  .levelBox a{display: inline-block;padding: 5px 10px;background: #f60;
border-radius: 3px;width: 100%;text-align: center;color: #fff;font-size: 16px;margin-top: 20px;}
.dotBox .myTab  {background: #fff;}
.dotBox .myTab li{float: left;width: 33.33%;text-align: center;padding: 1rem 0;}
.dotBox .myTab li a{padding: 2px 8px;border-radius: 3px;display: inline-block;color: #f60;border: 1px #f60 solid;}
.dotBox .myTab li.active a{background: #f60;color: #fff;}
.red{color: #f00;}
.blue{color: #138cdf;}
.mailDetailBox{background: #fff;padding: 60px 1rem;}
.mailDetailBox .top li{padding: 0.5rem 0;}
.mailDetailBox .top li span{width: 60px;color: #999;display: inline-block;}
.mailDetailBox .top h3{margin-bottom: 10px;font-weight: bold;line-height: 20px;}
.mailDetailBox .top li a{margin-right: 10px;}
.mailDetailBox .content{margin-top: 20px;}
.mailDetailBox .content h3{font-weight: bold;margin-bottom: 20px;}
.mailDetailBox .content p{margin-bottom: 10px;}
.mailBody .fixBtm input{width: calc(100% - 90px);border: 1px #dedede solid;padding-left: 5px;height: 30px;}
.mailBody .fixBtm a{width: 80px;float: right;height: 30px;line-height: 30px;font-size: 16px;text-align: center;}
.mailBody .fixBtm{position: fixed;width: calc(100% - 2rem);padding: 0.5rem 1rem;background: #fff;
box-shadow: 0 0 5px #eee;bottom: 0;}
.mail_fileBox dl{float: left;margin-right: 20px;}
.mail_fileBox dl dd,.mail_fileBox dl dt{display: inline-block;}
.mail_fileBox{padding: 15px;}
.mail_textBox *{box-sizing: border-box;}
.mail_textBox textarea{height: 300px;border:none;padding: 10px 15px;width: 100%;margin-top: 15px;}
.searchTop .fl{width: calc(100% - 40px);}
.headerTop1 li button{background: none;border: none;}